<template>
  <view class="w-wraper" :class="{ show: showTimePicker }">
    <view class="w-time-picker" :class="{ show: showTimePicker }">
      <view class="wtitle">
        <text>选择预约时间</text>
        <u-icon
          @click.stop="hide"
          name="close-circle"
          color="#818181"
          size="60"
        ></u-icon>
      </view>
      <view class="w-scroll">
        <view class="w-time-days">
          <scroll-view scroll-y style="height: 100%">
            <view class="w-time-scroll">
              <view
                class="w-time-day"
                :class="{ active: tabIndex == index }"
                v-for="(day, index) in dayList"
                :key="index"
                @tap="toggleIndex(day, index)"
              >
                <view class="w-time-date"
                  >{{ day.month }}月{{ day.day }}日</view
                >
                <view class="w-time-week">{{ day.week }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="w-time-body">
          <scroll-view scroll-y class="w-time-list-scroll">
            <view class="w-time-list">
              <view
                class="w-time-item"
                :class="{
                  active: itemIndex == index,
                  'w-time-item-active': !item.disabled,
                }"
                v-for="(item, index) in timeList"
                :key="index"
                @tap="toggleItem(item, index)"
                >{{ item.label }}</view
              >
            </view>
          </scroll-view>
        </view>
      </view>

      <view class="w-time-footer">
        <!-- <view class="w-time-cancel w-time-btn" @click="hide">取消</view> -->
        <view class="w-time-sure w-time-btn" @click="submit">确定选择</view>
      </view>
    </view>
  </view>
</template>

<script>
let _this = null;
export default {
  props: {
    afterDays: {
      type: [String, Number],
      default: 7,
    },
    startHour: {
      type: [String, Number],
      default: 7,
    },
    endHour: {
      type: [String, Number],
      default: 24,
    },
    step: {
      type: [String, Number],
      default: 30,
    },
    afterHours: {
      type: [String, Number],
      default: 2,
    },
    theme: {
      type: String,
      default: "#FFF",
    },
  },
  data() {
    return {
      dayList: [],
      timeList: [],
      tabIndex: 0,
      itemIndex: -1,
      showTimePicker: false,
      time: "",
    };
  },
  created() {
    _this = this;
    _this.initPicker();
    _this.initHours();
  },
  methods: {
    hide() {
      _this.showTimePicker = false;
      //_this.$emit("cancel");
    },
    show() {
      _this.showTimePicker = true;
    },
    submit() {
      if (_this.time != "") {
        let tabItem = _this.dayList[_this.tabIndex];
        let result =
          tabItem.year +
          "-" +
          tabItem.month +
          "-" +
          tabItem.day +
          " " +
          _this.time.label +
          ":00";
        _this.$emit("confirm", result);
        _this.showTimePicker = false;
      }
    },
    toggleIndex(item, index) {
      _this.tabIndex = index;
      _this.itemIndex = -1;
      _this.initHours(!item.isToday);
    },
    toggleItem(item, index) {
      if (!item.disabled) {
        _this.itemIndex = index;
        _this.time = item;
      }
    },
    forMatNumber(n) {
      return n < 10 ? "0" + n : n;
    },
    initHours(flag) {
      let aDate = new Date();
      let curHour = aDate.getHours();
      _this.timeList = [];
      for (let j = _this.startHour * 1; j < _this.endHour * 1; j++) {
        for (let k = 0; k < 60; k += _this.step * 1) {
          if (flag) {
            _this.timeList.push({
              label: _this.forMatNumber(j) + ":" + _this.forMatNumber(k),
              disabled: false,
            });
          } else {
            const h = curHour + _this.afterHours;
            _this.timeList.push({
              label: _this.forMatNumber(j) + ":" + _this.forMatNumber(k),
              disabled: h < j ? false : h == j ? (k ? false : true) : true,
            });
          }
        }
      }
    },
    initPicker() {
      let aDate = new Date();
      let weekList = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      _this.dayList.push({
        year: aDate.getFullYear(),
        month: _this.forMatNumber(aDate.getMonth() + 1),
        day: _this.forMatNumber(aDate.getDate()),
        week: weekList[aDate.getDay()],
        isToday: true,
      });
      for (let i = 1; i < _this.afterDays * 1; i++) {
        aDate.setDate(aDate.getDate() + 1);
        _this.dayList.push({
          year: aDate.getFullYear(),
          month: _this.forMatNumber(aDate.getMonth() + 1),
          day: _this.forMatNumber(aDate.getDate()),
          week: weekList[aDate.getDay()],
          isToday: false,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.w-wraper {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  &.show {
    display: block;
  }
}

.w-time-picker.show {
  transform: translate3d(0, 0, 0);
}
.w-time-picker {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;

  background: #f6fafd;
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: all 0.3s ease;
  .wtitle {
    position: relative;
    color: #000;
    font-size: 36rpx;
    font-weight: bold;
    padding: 20rpx 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .w-scroll {
    position: relative;
    height: 70vh;
    display: flex;
  }
  .w-time-days {
    flex: 1;
    overflow: hidden;
    padding: 20upx 0;
    // .w-time-scroll{
    // 	white-space: nowrap;
    // }
    .w-time-day {
      display: block;
      text-align: center;
      color: #000;
      margin: 0 0 20rpx;
      border-radius: 6upx;
      padding: 10upx 0;
      color: #333;

      .w-time-week {
        font-size: 28rpx;
        line-height: 1.5;
      }
      .w-time-date {
        font-size: 36rpx;
        line-height: 1.5;
      }
      &.active {
        background-color: #fff;
        color: #f00;
      }
    }
    .w-time-day-active {
      color: #f00;
      border-color: #f00;
    }
  }
  .w-time-body {
    flex: 2;
    overflow: hidden;
    background-color: #fff;
    .w-time-list-scroll {
      height: 100%;
    }
    .w-time-list {
      display: flex;
      flex-wrap: wrap;
      padding: 20upx 10upx;
    }
    .w-time-item {
      width: 216rpx;
      height: 80upx;
      line-height: 80upx;
      margin: 0 10upx 20upx;
      text-align: center;
      border: solid 1px #ddd;
      border-radius: 6upx;
      font-size: 28upx;
      opacity: 0.3;
      transition: all 0.3s ease;
      &.active {
        border-color: #f00;
        color: #f00;
      }
    }
    .w-time-item-active {
      opacity: 1;
      background-color: #fff;
    }
  }
  .w-time-footer {
    display: flex;
    background-color: #fff;
    padding: calc(10rpx + env(safe-area-inset-bottom)) 30rpx;
    .w-time-btn {
      flex: 1;
      text-align: center;
      line-height: 88upx;
      font-size: 30upx;
      border-radius: 28rpx;
    }
    .w-time-sure {
      background-color: #fa2209;
      color: #fff;
    }
  }
}
</style>
